import React, { useState, useEffect } from 'react';
import styles from './index.module.css';
import { LeftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

export default function Acceptance() {
  const navigate = useNavigate();
  const [acceptance, setAcceptance] = useState([]);

  const getAcceptanceList = async () => {
    try {
      let response = await axios.get(
        'http://localhost:3009/gwh/AcceptanceList',
      );
      if (response.data.code === 200) {
        setAcceptance(response.data.data);
      }
    } catch (error) {
      return error;
    }
  };

  useEffect(() => {
    getAcceptanceList();
  }, []);


  const handleGoDetail = (data) => {
    navigate('/AcceptanceDetail', { state: data });
  }

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.backButton}>
          <LeftOutlined onClick={() => navigate(-1)} />
        </div>
        <div className={styles.title}>产品检查</div>
        <div className={styles.emptySpace}></div>
      </div>

      <div className={styles.subHeader}>
        <div className={styles.journalTitle}>产品检查日志</div>
        <div className={styles.dateFilter}>2023年12月</div>
      </div>

      <div className={styles.recordList}>
        {acceptance.map((record, index) => (
          <div key={index} className={styles.recordItem} onClick={()=>handleGoDetail(record)}>
            <div className={styles.timeHeader}>
              <div className={styles.indicatorLine}></div>
              <div className={styles.dateTime}>
                {record.checkTimer.slice(0,10)}
              </div>
            </div>
            <div className={styles.recordContent}>
              <div className={styles.certificateBox}>
                  <img src={record.imgUrl[0]} alt=""/>
              </div>
              <div className={styles.recordInfo}>
                <div className={styles.recordTitle}>{record.title}</div>
                <div className={styles.recordDetail}>
                  <div className={styles.detailItem}>
                    <span className={styles.label}>供应商：</span>
                    <span className={styles.value}>{record.supplier}</span>
                  </div>
                  <div className={styles.detailItem}>
                    <span className={styles.label}>检查产品：</span>
                    <span className={styles.value}>{record.checkSelect.join('、')}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
